import React from 'react';
import './login.css'
import $ from "jquery";

const styleDisplay = {
  display: 'none',
}

//鼠标移入
const mouseMove = () =>{
  $("#language-ico").addClass("_active")
  $("#language-opt").css("display","");
  $("._active").attr("src","./img/up.png");
}
//鼠标移出
const  mouseLeave = () =>{
  $("#language-ico").removeClass("_active");
  $("#language-opt").css("display","none");
  $("#language-ico").attr("src","./img/down.png");
}
function Top() {
  return (
    <div id="top">
      <a href={"//www.aliyun.com"}>
        <img src={"./img/top.png"}/>
      </a>
      <span className="topbar-text">登录</span>
      <div id="language" onMouseMove={mouseMove} onMouseLeave={mouseLeave}>
        <div className="opt">简体中文</div>
        <img src={"./img/down.png"} width="18px" height="17px" id="language-ico"/>
      </div>
      <div id="show" onMouseMove={mouseMove} onMouseLeave={mouseLeave}></div>
      <div id="language-opt" onMouseMove={mouseMove} onMouseLeave={mouseLeave} style={styleDisplay}>
        <div className="opt">
          <a href={"https://account-intl.aliyun.com/login/login.htm"} target="_top">
            <span>International</span>
          </a>
        </div>
        <div className="opt">
          <a href={"https://account-jp.aliyun.com/login/login.htm"} target="_top">
            <span>日本サイト</span>
          </a>
        </div>
      </div>
    </div>
  );
}
export default Top;